<template>
    <div class="live">
        <div class="main">
            <!-- 简介 -->
            <div class="introduce">
                <div class="live-title">
                    <h1>{{ live.liveTitle }}</h1>
                </div>
                <div class="live-detail">
                    <i class="el-icon-video-play"></i>
                    <span>{{ live.liveOnline }}</span>
                    <i class="el-icon-s-grid"></i>
                    <span>{{ live.livePartition }}</span>
                </div>
            </div>

            <!-- 关注 -->
            <div class="user-follow">
                <div class="up-cover">
                    <el-image class="cover-img" lazy :src="live.avatarUrl" @click="'/front/Space?id=' + live.userId" />
                </div>
                <div class="right-div">
                    <div class="up-nickname">
                        <a> {{ live.userId }}</a>
                    </div>
                    <div class="up-introduction">
                        <span> {{ live.userId }}</span>
                    </div>
                    <div class="up-concern">
                        <el-button v-if="!follow.isDelete == true" @click="">+ 关注 {{ live.userId }}</el-button>
                        <el-button v-if="follow.isDelete == true" class="un-follow" @click="">已关注</el-button>
                    </div>
                </div>
            </div>
        </div>

        <!--  video  -->
        <div class="live-video">
            <div class='demo'>
                <LiveDplay1 class="player" :url="url" v-if="lock">
                </LiveDplay1>
            </div>

            <div class="chat-box">
                <div class="chat-header">
                    <span class="chat-number">近期活动: {{  }}</span>
                </div>
                <div class="chat-message">
                    <div class="msg-box" v-for="(item, index) in messageList" :key="index">
                        <span class="userName">{{ item.userName }} : </span>
                        <span class="message">{{ item.message }}</span>
                    </div>
                </div>
                <div class="chat-bottom">
                    <input type="text" class="text" placeholder="请输入发送信息内容" v-model="contentText" />
                    <button class="sendText" @click="sendText()">发送消息</button>
                </div>
            </div>

        </div>

    </div>
</template>

<script>
import { getLiveDetail } from "@/api/other/live";

import LiveDplay1 from "@/views/live/LiveDplay1"

export default {
    name: "LiveDetail",
    components: {
        LiveDplay1
    },
    data() {
        return {
            id: this.$route.params.id,
            live: {},
            follow: {},

            downloadUrl: process.env.VUE_APP_DOWNLOAD_URL,
            liveUrl: process.env.VUE_APP_LIVE_URL,
            url: "",
            lock: false,

            // 弹幕相关
            messageList: [],
            // input输入的值
            contentText: '',
        }
    },
    computed: {
        frozenData() {
            return this.follow;
        },
    },
    created() {
        this.loadLive();
    },
    methods: {
        async loadLive() {
            const { data: res } = await getLiveDetail(this.id);
            if (res.code !== '0') {
                return;
            }
            this.live = res.data;
            let url = res.data.liveUrl;
            let urlSub = url.slice(url.lastIndexOf("=") + 1);
            console.log(this.liveUrl + urlSub);
            this.url = this.liveUrl + urlSub;
            this.lock = true;
        },
    }
}
</script>

<style>
.live {
    max-width: 1500px;
    margin: 0px auto;
    padding-left: 5%;
    padding-right: 5%;
}

.main {
    display: flex;
}

.introduce {
    min-width: 650px;
    width: 65%;
    height: 75px;
    margin-top: 20px;
    flex-direction: column;
    justify-content: space-between;
}

.live-title {
    height: 30px;
}

.live-title h1 {
    font-size: 20px;
    font-weight: 530;
    -webkit-font-smoothing: antialiased;
    text-overflow: ellipsis;
}

.live-detail {
    height: 25px;
    margin-top: 10px;
}

.live-detail i {
    margin-right: 5px;
}

.live-detail span {
    margin-right: 10px;
}

.user-follow {
    display: flex;
    justify-content: flex-start;
    min-width: 350px;
    width: 35%;
    height: 80px;
    margin-left: 20px;
    margin-top: 15px;
}

.follow-item {
    display: flex;
    justify-content: flex-start;
}

.up-cover {
    width: 80px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cover-img {
    width: 50px;
    height: 50px;
    cursor: pointer;
    border-radius: 50%;
}

.right-div {
    min-width: 250px;
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    font-family: SimHei, Arial, sans-serif;
}

.up-nickname a {
    color: #BE7E4A;
    cursor: pointer;
}

.up-introduction {
    margin-top: 10px;
    width: 100%;
    height: 18px
}

.up-introduction span {
    color: #9c9fa4;
    line-height: 18px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    line-break: anywhere;
    -webkit-line-clamp: 1;
    font-size: 14px;
    width: 100%;
}

.up-concern {
    width: 100%;
}

.up-concern .el-button {
    background-color: #57C3C2 !important;
    color: white !important;
    margin-top: 5px;
    width: 100%;
    border-radius: 7%;
}

.un-follow {
    background-color: #8c939d !important;
}

.live-video {
    margin: 0px auto;
    display: flex;
}

.demo {
    min-width: 650px;
    width: 65%;
    min-height: 400px;
    height: 30vw;
    margin-top: 15px;
}

.player {
    width: 100%;
    height: 100%;
}

.chat-box {
    min-width: 350px;
    width: 35%;
    height: 400px;
    margin-top: 15px;
    margin-left: 20px;
    border: 2px solid rgba(105, 105, 105, 0.2);
}

.chat-message {
    width: 100%;
    height: 80%;
    text-align: left;
    background: rgb(209, 227, 207);
}

.msg-box {
    padding: 5px;
    /* margin-top: 10px; */
}

.userName {
    font-size: 16px;
    color: burlywood;
}

.message {
    font-size: 13px;
}

.chat-bottom {
    width: 100%;
    height: 20%;
}

.text {
    width: 70%;
    height: 100%;
}

.sendText {
    width: 28%;
    height: 100%;
    margin-left: 5px;
    background: rgb(117, 169, 210);
    color: #fff;
}
</style>
